<template>
    <main-layout>
        <div class="proResvationBox">
            <!-- 顶部内容 -->
            <van-nav-bar
                title="用户预约"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
            <!--第一部分-->
            <img class="PgImg" :src="business.project?business.project.image.imageurl:''">

            <!--第二部分-->
            <div class="business">
                <div class="businessName">
                    商家名称：
                    <span>{{business.busname}}</span>
                </div>
                <div class="projectName">
                    项目名称：
                    <span>{{business.project?business.project.proname:''}}</span>
                </div>
                <div class="businessTime">
                    服务时间：
                    <span>{{business.servertime}}</span>
                </div>
            </div>

            <!--第三部分-->
            <div class="businessDateAndTime">
                <!--日期选择-->
                <div class="section">
                    <img src="../../images/date.png">
                    <input :value="selectDateVal | dateFormat('YYYY-MM-DD')" @focus="selectDateEvt" class="dateInput" type="text">
                </div>
                <van-popup v-model="showDate" round position="bottom" :style="{ height: '30%' }">
                    <van-datetime-picker
                        v-model="currentDate"
                        type="date"
                        title="选择年月日"
                        :min-date="minDate"
                        :max-date="maxDate"
                        @confirm='confirm'
                        @cancel="cancel"
                    />
                </van-popup>

                <!--时间选择-->
                <div class="section">
                    <img src="../../images/time.png">
                    <input :value="selectTimeVal" @focus="selectTimeEvt" class="timeInput" type="text">
                </div>
                <van-popup v-model="showTime" round position="bottom" :style="{ height: '30%' }">
                    <van-datetime-picker
                        v-model="currentTime"
                        type="time"
                        title="选择时间"
                        :min-hour="0"
                        :max-hour="24"
                        @confirm='confirm'
                        @cancel="cancel"
                    />
                </van-popup>
            </div>

            <!--第四部分-->
            <div class="Order">
                <div class="userImageItem">
                    <div class="formItem">
                        <span>预约宾客姓名</span>
                        <input type="text" v-model="guestObj.guestName" placeholder="请输入宾客姓名" />
                    </div>

                    <div class="formItem">
                        <span>预约宾客电话</span>
                        <input type="number" v-model="guestObj.guestPhone" placeholder="请输入宾客电话" />
                    </div>

                    <div class="formItem">
                        <span>预约留言信息</span>
                        <input type="text" v-model="guestObj.guestInformation" placeholder="请输入留言信息" />
                    </div>

                    <button style="width: 90%;" class="orderBtn" @click="determineEvt">确认预定</button>
                </div>
            </div>
        </div>
    </main-layout>
</template>

<script>
    import { getBusinessApi, createOrderApi } from '../../axios/proReservation'
    export default {
        data() {
            return {
                //商家数据对象
                business:{},
                // 选择日期
                selectDateVal:'2000-01-01',
                showDate:false,
                minDate: new Date(2000, 0, 1),
                maxDate: new Date(2099, 10, 1),
                currentDate: new Date(2000, 1, 1),
                //选择时间
                currentTime: '00:00',
                showTime:false,
                selectTimeVal:'00:00',
                //宾客信息
                guestObj:{
                    guestName:'',
                    guestPhone:'',
                    guestInformation:''
                }
            }
        },

        async created() {
            //截取地址栏id号
            let url = window.location.href
            let id=url.split('=')[1]

            //根据项目id调用商家接口
            let businessResult = await getBusinessApi(id)
            if(businessResult.code==0){
                let _path=businessResult.data.project.image.imageurl
                businessResult.data.project.image.imageurl='http://120.79.136.98/Hairdressing/images/'+_path
                this.business=businessResult.data
            }
        },

        methods: {
            //返回首页
            onClickLeft(){
                this.$router.go(-1)
            },
            //弹出填写日期事件
            selectDateEvt(){
                this.showDate=true
            },
            confirm(){
                this.showDate=false
                this.showTime=false
                this.selectDateVal=this.currentDate
                this.selectTimeVal=this.currentTime
            },
            cancel(){
                this.showDate=false
                this.showTime=false
            },

            //弹出填写时间事件
            selectTimeEvt(){
                this.showTime=true
            },

            //确定预定按钮点击事件
            async determineEvt(){
                //校验用户输入信息
                let reg=/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
                if(this.guestObj.guestName===''||this.guestObj.guestPhone===''||this.guestObj.guestInformation===''){
                    this.$toast.fail({
                        message: '请完善用户信息！',
                        position: 'center',
                    });
                    return
                }
                else if(!reg.test(this.guestObj.guestPhone)){
                    this.$toast.fail({
                        message: '手机号不正确，请重新输入！',
                        position: 'center',
                    });
                    return
                }
                this.$toast.success({
                    message: '预定成功！',
                    position: 'center',
                });
                //获取vuex中的token值
                let token=this.$store.getters['common/getToken']
                let objectItem={
                    token:token,
                    proname:this.business.project.proname,
                    makedate:this.selectDateVal+" "+this.selectTimeVal,
                    username:this.guestObj.guestName,
                    usertell:this.guestObj.guestPhone,
                    information:this.guestObj.guestInformation,
                    path:this.business.project.image.imageurl,
                    busid:this.business.id,
                    proid:this.business.project.id
                }
                //将预约的项目信息存入vuex中
                let objectArr=this.$store.getters['common/getProjectInfo']
                objectArr=[...objectArr,objectItem]
                this.$store.commit('common/setProjectInfo',objectArr)
            }
        },
    }
</script>

<style lang="less" scoped>
    .proResvationBox{
        display: block;
        /*第一部分*/
        .PgImg{
            width: 100%;
            height: 250px;
        }

        /*第二部分*/
        .business{
            margin-top: 20px;
            margin-left: 40px;
            .businessName{
                font-weight: bold;
                font-size: 22px;
                > span{
                    color: crimson;
                    margin-left: 15px;
                }
            }
            .projectName{
                font-weight: bold;
                font-size: 22px;
                margin: 18px 0;
                > span{
                    color: crimson;
                    margin: 0 15px;
                }
            }
            .businessTime{
                font-weight: bold;
                font-size: 22px;
                & span{
                    color: crimson;
                    margin-left: 15px;
                }
            }
        }

        /*第三部分*/
        .businessDateAndTime{
            display: flex;
            margin-top: 40px;
            justify-content: space-evenly;
            .section{
                display: flex;
                width: 45%;
                align-items: center;
                justify-content: space-evenly;
                > img{
                    width: 20px;
                    height: 20px;
                }
                > .dateInput{
                    border-radius: 5px;
                    width: 100px;
                }
                > .timeInput{
                    border-radius: 5px;
                    width: 100px;
                }
            }
        }

        /*第四部分*/
        .Order{
            width: 300px;
            display: block;
            margin: 80px auto;
            .userImageItem{
                .formItem{
                    > span{
                        font-weight: bold;
                        font-size: 18px;
                        letter-spacing: 1px;
                    }
                    > input{
                        border: 1px solid #999;
                        width: 300px;
                        height: 30px;
                        border-radius: 10px;
                        margin: 20px 0;
                        &::placeholder{
                            font-size: 14px;
                            padding-left: 10px;
                        }
                    }
                }

                .orderBtn{
                    display: block;
                    width: 200px;
                    height: 50px;
                    margin: 30px auto;
                    background-color: #F76C76;
                    color: #fff;
                    border: none;
                    outline: none;
                    border-radius: 10px;
                    transition-duration: 0.5s;
                    &:hover{
                        background-color: #C3545C;
                    }
                }
            }
        }
    }
</style>